<template>
  <div id="app">
    <div class="nav">
      <ul>
        <li><router-link to="/">首页</router-link></li>
        <li><router-link to="/hema">盒马小镇</router-link></li>
        <li><router-link to="/cat">盒购物车</router-link></li>
        <li><router-link to="/my">我的</router-link></li>
      </ul>
    </div>
  </div>
  <router-view />
</template>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.router-link-active {
  color: red;
}

.nav > ul {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: rgb(255 255 252);
}
#app {
  padding-bottom: 60px;
}
</style>
